<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>本页面演示js操作Dom节点</title>
+		<style type="text/css">
+			#div1{
+				border: #006400 solid 1px;
+				height: 200px;
+				width: 200px;
+			}
+			img{
+				width: 100px;
+			}
+		</style>
+	</head>
+	<body>
+        <input type="button" id="btnAdd" value="点击添加" onclick="addElement()" />		
+		<div id="div1"></div>
+		<ul id="ulNews">
+		</ul>
+		
+		<a href="http://baidu.com" target="_blank" id="link1">自由早晚乱余生</a>
+		<script type="text/javascript">
+			var divBox = document.getElementById("div1");
+			function addElement(){
+				
+				console.log("添加子节点之前的子节点：")
+				// 若只有一个子节点.那么第一个子节点和最后一个子节点是同一个
+				var boxFirstChild = divBox.firstChild;
+				console.log(boxFirstChild);
+				var boxLastChild = divBox.lastChild;
+				console.log(boxLastChild);
+				
+				// 创建一个元素节点。参数为标签名
+				var imgNode = document.createElement("img");
+				// 可以直接设置元素属性
+				imgNode.src = "1.jpg"
+				// 追加子节点.参数必须为一个节点
+				divBox.appendChild(imgNode);
+				
+				console.log("添加子节点之后的子节点：")
+				// 若追加后只有imgNode则.第一个节点和最后一个节点都是imgNode
+				var boxFirstChild = divBox.firstChild;
+				console.log(boxFirstChild);
+				var boxLastChild = divBox.lastChild;
+				console.log(boxLastChild);
+				
+				// 创建属性节点nowId.
+				var attrNode = document.createAttribute("nowId");
+				// 属性节点的值.获取与设置都是使用nodeValue
+				attrNode.nodeValue = '@#$SFSF!!@#!@#';
+				
+				divBox.setAttributeNode(attrNode);
+				
+			
+			}
+			
+			// 动态的追加元素示例
+			var ulList = document.getElementById("ulNews");
+			for(var i=0; i<10; i++){
+				var node = document.createElement("li");
+				node.value = i;
+				node.innerHTML = "<a href='http://www.baidu.com' target=''_blank'>新闻" + i + "</a>";
+				
+				// 创建属性节点nowId.
+				var attrNode = document.createAttribute("nowId");
+				// 属性节点的值.获取与设置都是使用nodeValue
+				attrNode.nodeValue = 'id_' + i;
+				// 设置li节点的属性.参数必须为一个属性节点
+				node.setAttributeNode(attrNode);
+				
+				ulList.appendChild(node);
+			}
+			
+			
+			// 演示追加文本节点
+			var link1 = document.getElementById("link1");
+			console.log("修改前的文本节点");
+			console.log(link1.firstChild);
+			
+			var textNode = document.createTextNode("不想打不想打就不想打开");
+		    link1.appendChild(textNode);
+			console.log("添加文本子节点之后的子节点：")
+			var aFirstChild = link1.firstChild;
+			console.log(aFirstChild);
+			var aLastChild = link1.lastChild;
+			console.log(aLastChild);
+			var textNode2 = document.createTextNode("这次我要在第一个显示");
+			// replaceChild的第一个参数为新节点.第二个参数为旧的子节点
+			link1.replaceChild(textNode2, link1.firstChild);
+			
+			// 从父节点移除指定的子节点
+			link1.removeChild(link1.lastChild);
+			
+			var node0 = document.createElement("li");
+			node0.innerText = "-1新闻";
+			// 在指定子节点前插入新的子节点,参数1为新的子节点.2为已存在的子节点
+			ulList.insertBefore(node0, ulList.lastChild);
+			
+			
+			// 查看元素节点的nodeName
+			console.log("div的nodeName：" + divBox.nodeName);
+			
+			// 创建属性节点nowId.
+			var attrNode = document.createAttribute("NowUserId");
+			// 属性节点的值.获取与设置都是使用nodeValue
+			attrNode.nodeValue = 'Kamihati';
+			// 查看属性节点的nodeName
+			console.log('属性节点的nodeName:' + attrNode.nodeName);
+			
+			// 显示文本节点的nodeName
+			console.log("文本节点的NodeName:" + textNode.nodeName);
+			
+			// 显示文档节点的nodeName
+			console.log("文档节点的nodeName:" + document.nodeName);
+			
+			ulList.setAttributeNode(attrNode);
+			
+			console.log("属性节点的nodeValue=" + attrNode.nodeValue);
+			
+			// 使用节点控制元素的样式
+			divBox.style.backgroundColor = "pink";
+			// 控制元素的宽度
+			divBox.style.width = "300px";
+		</script>
+	</body>
+</html>